<template>
    <div class="canvaContainer" ref="test" style="height:40vh;"></div>
</template>

<script>
import * as echarts from 'echarts';
export default {
    methods: {
        drawEcharts() {
            var myChart = echarts.init(this.$refs.test, 'dark');

            // 指定图表的配置项和数据
            var option = {
                backgroundColor: '#121626',
                color: ['#DE6173', '#333FFF', '#23B899'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                legend: {
                    data: ['车站意外', '客车不文明', '服务缺陷']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: [
                            '3-5',
                            '3-6',
                            '3-7',
                            '3-8',
                            '3-9',
                            '3-10',
                            '3-11'
                        ]
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '车站意外',
                        type: 'bar',
                        stack: '车站意外',
                        emphasis: {
                            focus: 'series'
                        },
                        barWidth: 10,
                        data: [320, 332, 301, 334, 390, 330, 320]
                    },
                    {
                        name: '客车不文明',
                        type: 'bar',
                        stack: '客车不文明',
                        emphasis: {
                            focus: 'series'
                        },
                        barWidth: 10,
                        data: [120, 132, 101, 134, 90, 230, 210]
                    },
                    {
                        name: '服务缺陷',
                        type: 'bar',
                        stack: '服务缺陷',
                        emphasis: {
                            focus: 'series'
                        },
                        barWidth: 10,
                        data: [220, 182, 191, 234, 290, 330, 310]
                    }
                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }
    },
    mounted() {
        this.drawEcharts();
    }
};
</script>

<style lang="scss" scoped>
.canvaContainer {
    box-sizing: border-box;
    padding: 20px 10px 0;
    width: 100%;
}
</style>
